<table ng-class="::{'diff-added': value._diff === 'added',
                 'diff-removed': value._diff === 'removed',
                 'diff-changed': value._diff === 'changed',
                 'proto_table': true}">
  <tbody>
    <tr ng-repeat="item in ::controller.items"
        ng-class="::{'diff-added': item.value._diff === 'added',
                  'diff-removed': item.value._diff === 'removed',
                  'diff-changed': item.value._diff === 'changed'}">
      <td class="proto_key" ng-if="::item.desc !== undefined">
        <abbr title="{$ ::item.desc $}">{$ ::item.key $}</abbr>
      </td>
      <td class="proto_key" ng-if="::item.desc === undefined">{$ ::item.key $}</td>

      <td class="proto_value">
        <grr-semantic-value ng-if="::!item.isList && item.value !== undefined" value="::item.value">
        </grr-semantic-value>
        <div ng-if="::item.isList === true">
          <div ng-repeat="repeatedItem in ::item.value"
               ng-class="::{'diff-added': repeatedItem._diff === 'added',
                         'diff-removed': repeatedItem._diff === 'removed',
                         'diff-changed': repeatedItem._diff === 'changed',
                         'repeated': true}">
            <grr-semantic-value value="::repeatedItem"></grr-semantic-value>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
